<template>
	<view class="clone">
		<image class="fanhui" :src="imageUrl + '/tesewuchan/tesewuchanfanhui2.png'" @click="fhuizhuye"></image>
		<view class="navbar">
			<view class="navbar-tabs">
				<view v-for="(tab, index) in tabs" :key="index" @tap="selectTab(index)"
					:class="['navbar-tab', activeIndex === index? 'active' : '']">
					{{ tab }}
				</view>
			</view>
		</view>
		<!-- 图片显示区域 -->

		<view class="hezi">
			<z-swiper v-model="selectedTabImages" :custom-style="{height:'90vh',width:'663.67rpx'}" :options="options" 
				style="margin-top: 0.1vh;">
				<z-swiper-item v-for="(item,index) in selectedTabImages" :key="index" class="hezi-image" :custom-style="{height:' 316.21rpx',width:'663.67rpx'}">
					<image class="image" :src="item" mode="aspectFill" @click="juqiang"> </image>
				</z-swiper-item>
			</z-swiper>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				secondaryParam7: '',
				page3PreviousParam: '',
				imageUrl: this.$imageUrl,
				options: {
					direction: 'vertical',
					slidesPerView: 3,
					spaceBetween: 20,
				},
				activeIndex: 0,
				tabs: ['内容总览', '建村智慧', '文化渊源', '历史遗留'],
				selectedTabImages: [], // 初始化 selectedTabImages
				tabImages: {
					'内容总览': ["https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1260.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1261.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1262.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1260.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1261.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1262.png"
					],
					'建村智慧': ["https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1261.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1262.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1260.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1261.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1262.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1260.png"
					],
					'文化渊源': ["https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1260.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1261.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1262.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1260.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1261.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1262.png"
					],
					'历史遗留': ["https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1261.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1262.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1260.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1261.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1262.png",
						"https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/Group-1260.png"
					],
				}
			};
		},
		onLoad(options) {
		    // 获取跳转传递过来的参数
		    this.page3PreviousParam = options.fromPage;
			const page3PreviousParam = options.fromPage;
		    console.log('上一个页面传递的参数：', this.page3PreviousParam);
			if (page3PreviousParam) {
			    this.secondaryParam7 = page3PreviousParam;
			    uni.setStorageSync('page6StoredParam', page3PreviousParam);
			  } else {
			    this.secondaryParam7 = uni.getStorageSync('page6StoredParam');
			  }
			  console.log('获取到的参数或本地存储的值：', this.secondaryParam7);
			},
		methods: {
			selectTab(index) {
				this.activeIndex = index;
				const selectedTab = this.tabs[index];
				this.selectedTabImages = this.tabImages[selectedTab];
			},
			fhuizhuye() {
				console.log('触发了')
				console.log('page3PreviousParam 值为：', this.page3PreviousParam);
				console.log('secondaryParam7 值为：', this.secondaryParam7);
			    if (this.page3PreviousParam) {
					 console.log('特定跳转，page3PreviousParam 值为：', this.page3PreviousParam);
			        wx.redirectTo({
			            url: `/${this.page3PreviousParam}`
			        });
			    } else if (this.secondaryParam7) {
					// 如果 page3PreviousParam 为空，使用 secondaryParam7 进行跳转
					console.log('上一次跳转，secondaryParam7 值为：', this.secondaryParam7);
			        wx.redirectTo({
			           url: `/${this.secondaryParam7}`
			        });
			    } else {
			   			        console.log('没有上一个页面传递的参数，也没有本地存储的值可用。');
			   			      }
			   			    },
			juqiang(){
				console.log('触发了')
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const currentPath = currentPage.route;
				console.log('当前页面路径：', currentPath);
				wx.redirectTo({
				  url: `/pages-exploration-discovery/Explore the wisdom of village construction/The first page.?fromPage=${currentPath}`,
				})
			}
		},
		mounted() {
			// 在组件挂载后手动调用一次 selectTab 方法，确保默认显示第一个导航选项的图片
			this.selectTab(0);
		}
	};
</script>

<style>
	.hezi{
		margin-top: 30rpx;
	}
	.clone {
		overflow: auto;
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background-color: #E4EBE9;
		margin-top: 0vh;
	}

	.fanhui {
		width: 28rpx;
		height: 28rpx;
		margin-top: 8vh;
		margin-left: 5vw;
		position: fixed;
	}

	.navbar {
		width: 100vw;
		height: 15vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12vh;
	}

	.navbar-tabs {
		width: 100vw;
		display: flex;
		padding-left: 22vw;
	}

	.navbar-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #77827B;
		line-height: 36rpx;
		letter-spacing: 10rpx;
		/* 设置字符间距为 2 像素 */
		font-family: Source Han Sans CN, Source Han Sans CN;
		text-align: center;
		width: 73.55rpx;
		height: 180rpx;
		writing-mode: vertical-lr;
		border-left: 2rpx solid #D3DCD9;
		border-left-height: 132rpx;
		border-right: 2rpx solid #D3DCD9;
		border-right-height: 132rpx;
		margin-right: 4vw;
		/* font-weight: bold; */
	}

	.navbar-tab.active {
		font-weight: bold;
		color: #3F5649;
		width: 73.55rpx;
		height: 220.18rpx;
		font-family: STLiti, STLiti;
		font-size: 38rpx;
		margin-top: -1vh;
		border-left: none;
		/* 添加这行取消左边框 */
		border-right: none;
		/* 添加这行取消右边框 */
		background-image: url("https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian2/daohangxuanxiang.png");
	}
	
	.hezi-image{
		width: 663.67rpx;
		height: 316.21rpx;
	}

	.image {
		width: 100%;
		height: 100%;
		border-radius: 4px 4px 4px 4px;
		margin-top: 4rpx;
		object-fit: cover;
		transform:  scale(1);
		/* border: 2px solid pink; */
	}
</style>